マルチカラムを実装してみます。CSS3columnsプロパティでの実装です。

• column-count： 段の数を指定して段組を作る
• column-width： 段の横幅を指定して段組を作る
• columns： 上記のプロパティを一括して指定するプロパティ

段と段の間の罫線→間隔を調整したりできるプロパティも用意されているそうですのでそれもメモしておきましょう。

HTML

<div class="multicolumnbox">
   <p> ～最初の段落～ </p>
   <p> ～2番目の段落～ </p>
   <p>このように複数のp要素をdiv要素に含めるシンプルなHTMLソースを使います。</p>
</div>

CSS（「最大4段組」＆「1段の最低横幅は200px」をまとめて指定）

.multicolumnbox {
   -moz-columns: 4 200px;
   -webkit-columns: 4 200px;
   columns: 4 200px;
}

段と段の間の罫線→間隔を調整したりできるプロパティも用意されているそうですのでそれもメモしておきましょう。

★ column-gap： 段と段の間の余白量を指定

-moz-column-gap: 40px;
-webkit-column-gap: 40px;
column-gap: 40px;

 

 

 

 

 

★column-rule： 段と段の間に引く罫線を指定（破線(dashed)、緑色(green)、太さを3px）

-moz-column-rule: dashed green 3px;
-webkit-column-rule: dashed green 3px;
column-rule: dashed green 3px;

■個別指定の場合
column-rule-style: dashed;
column-rule-color: green;
column-rule-width: 3px;

 

★break-before, break-after, break-inside： 段の区切り方法を指定

■指定要素の直前で段を区切りたい場合：
p {
   break-before: column;
}
このように記述すると、指定の要素(ここではp要素)の直前で、強制的に段が区切られます。

■指定要素の直後で段を区切りたい場合：
p {
   break-after: column;
}
このように記述すると、指定の要素(ここではp要素)の直後で、強制的に段が区切られます。

■指定要素の内部で段を区切りたくない場合：
p {
   break-inside: avoid-column;
}
このように記述すると、指定の要素(ここではp要素)の内部では、段を区切らないようになります。

 

★実装

こちらは「<div style="column-count:3;">」と記述、上手くいきません。

こちらはスタイル・シートに「 id="article"」を記述、上手く表示します。ただしスマホ表示には<div id="article">の指示は反映されません。

div#article {
  background-color: #ffc;
  padding: 5px;
  line-height: 1.5em;
-moz-column-count: 3; /* Firefox向け */
  -webkit-column-count: 3; /* Chrome, Safari向け */
  column-count: 3;
}